<!-- <template>
    <div class="subject">
        <ul>
            <li v-for="(item, index) in problems" :key="index">
                <span>{{ item.num1 }}</span>
                <span>+</span>
                <span>{{ item.num2 }}</span>
                <span>=</span>
                <input type="number" v-model="answer" @click="this.currentIndex = index" />
                <button @keyup.enter="ChangeSubmit(index)">提交</button>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    props: ['problems', 'num1', 'num2'],
    data() {
        return {
            //输入框
            answer: '',
            //选中下标
            currentIndex: 0,
            //回答的结果
            answerresult: '',
            //所有的结果的汇总
            answerflags: [],
            //计算结果
            resul: '',
        }
    },
    methods: {
        ChangeSubmit(index) {
            //输入框为空的情况
            if (this.answer === '') {
                this.answerresult = '未完成'
                this.answerflags.unshift(this.answerresult)
            } else {
                //输入框不为空的情况
                this.resul = this.problems[index].num1 + this.problems[index].num2
                if (this.answer === this.resul) {
                    this.answerresult = '回答正确';
                    this.answerflags.unshift(this.answerresult)
                } else {
                    this.answerresult = '回答错误';
                    this.answerflags.unshift(this.answerresult)
                }
            }
        }
    }
};
</script>

<style scoped>
.subject {
    margin: 5px;
    padding: 5px;
    font-size: 20px;
}

.subject span {
    display: inline-block;
    text-align: center;
    width: 20px;
}

.subject input {
    width: 50px;
    height: 20px;
}
</style> -->
<template>
    <div class="subject">
        <span>{{ item.num1 }}</span>
        <span>+</span>
        <span>{{ item.num2 }}</span>
        <span>=</span>
        <input type="number" v-model="answer" />
        <button @click="ChangeSubmit">提交</button>
    </div>
</template>

<script>
export default {
    props: ['item'],
    data() {
        return {
            //输入框
            answer: '',
        }
    },
    methods: {
        ChangeSubmit() {
            this.$emit('result', this.item.num1 + this.item.num2 == this.answer)
        }

    },
};
</script>
<style scoped>
.subject {
    margin: 5px;
    padding: 5px;
    font-size: 20px;
}

.subject span {
    display: inline-block;
    text-align: center;
    width: 20px;
}

.subject input {
    width: 50px;
    height: 20px;
}
</style>
